const htmlRender = require('./utils/htmlRender.js')

// ejs 渲染模板文件索引
const templateIndex = require('./template/index.js')

const defaultOptions = {
  title: 'auto-landing-page',
  backgroundColor: '#000',
  frameName: 'fixedBottomBtn',
  frameOptions: {
    style: {
      btnHeight: 0,
      paddingBotom: false
    },
    html: {
      bgImg: '../assets/bg.png',
      btnImg: '../assets/btn.png'
    }
  }
}

// 输出html文件
async function outputHmlt(options) {

  // 合并配置项
  options = Object.assign(defaultOptions, options)
  console.log('options: ', options)

  // 获取frameName
  const frameName = options.frameName

  // 渲染html 的 promise 实例
  // 等待各个html子区域渲染完成，拿到所有渲染结果
  const frameStyle = await htmlRender(templateIndex[frameName].style, options.frameOptions.style)
  const frameHtml = await htmlRender(templateIndex[frameName].html, options.frameOptions.html)
  let frameJs
  if (templateIndex[frameName].js) {
    frameJs = await htmlRender(templateIndex[frameName].js, options.frameOptions.js)
  }
  const htmlStyle = await htmlRender(templateIndex.style, {
    backgroundColor: options.backgroundColor,
    frameStyle: frameStyle
  })

  // 渲染主模板
  const htmlMain = await htmlRender(templateIndex.main, {
    title: options.title || '',
    styles: htmlStyle || '',
    body: frameHtml || '',
    js: frameJs || ''
  })

  return htmlMain

}

module.exports = outputHmlt
